<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style> 
    /* 手机端实现真正的一像素边框 */
    .border-1px,
    .border-bottom-1px,
    .border-top-1px,
    .border-left-1px,
    .border-right-1px {
      position: relative;
    }
    /* 线条颜色 黑色 */
    .border-1px::after,
    .border-bottom-1px::after, 
    .border-top-1px::after,
    .border-left-1px::after,
    .border-right-1px::after {
      background-color: #000;
    }
    /*底边边框一像素*/
    .border-bottom-1px::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      transform-origin: 0 0;
    }
    /*上边边框一像素*/
    .border-top-1px::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      transform-origin: 0 0;
    }
    /*左边边框一像素*/
    .border-left-1px::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      height: 100%;
      transform-origin: 0 0;
    }
    /*右边边框一像素*/
    .border-right-1px::after {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: 1px;
      height: 100%;
      transform-origin: 0 0;
    }
    .border-1px::after {
      content: "";      
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 1px solid red;
      transform-origin: 0 0;
      background-color: transparent;
    }
    /*设备像素比*/
    /*显示屏最小dpr为2*/
    @media (-webkit-min-device-pixel-ratio: 2) {
      .border-bottom-1px::after, .border-top-1px::after {
        transform: scaleY(0.5);
      }
      .border-left-1px::after, .border-right-1px::after {
        transform: scaleX(0.5);
      }
      .border-1px::after {
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        transform-origin: 0 0;
      }
    }
    .box {
      width: 100px;
      height: 100px;
      margin-top: 10px;
    }
    .box1 {
      background-color: rgba(255, 0, 0, 0.356);
    }
    .box2 {
      background-color: green;
    }
    .box3 {
      background-color: blue;
    }
    .box4 {
      background-color: skyblue;
    }
    .box5 {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box box1 border-top-1px"></div>
  <div class="box box2 border-bottom-1px"></div>
  <div class="box box3"></div>
  <div class="box box4"></div>
  <div class="box box5 border-1px"></div>
</body>
</html>